<template>
  <div>
    <div class="permiss">
      <el-form :inline="true">
        <div class="commontop">
          <div class="commontop-left">
            <el-button
              @click="toggleRowExpansion(true)"
              v-show="xsyc === '1' ? true : false"
              icon="iconfont icon-zhankai1"
              >展开</el-button
            >
            <el-button
              @click="toggleRowExpansion(false)"
              v-show="xsyc === '1' ? true : false"
              icon="iconfont icon-shouqi"
              >收起</el-button
            >
          </div>
          <div class="commontop-right">
            <el-button
              @click="handleAdd(-1)"
              icon="iconfont icon-tianjia1"
              class="green"
              v-show="xsyc === '1' ? true : false"
              >添加</el-button
            >
          </div>
        </div>
      </el-form>

      <!--表格-->
      <el-row>
        <el-table
          class="table"
          :data="tableData"
          ref="dataTreeList"
          v-loading="isLoading"
          element-loading-spinner="el-icon-loading"
          element-loading-text="玩命加载中"
          :default-expand-all="defaultExpandAll"
          row-key="id"
          :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="title" label="名称"> </el-table-column>
          <el-table-column prop="url" label="菜单链接"> </el-table-column>
          <el-table-column
            prop="desc"
            :show-overflow-tooltip="true"
            label="描述"
          >
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <!-- v-if="scope.row.value == true ? true : false" -->
              <el-button
                class="green"
                size="mini"
                @click="handleAdd(scope.row.id)"
                ><i class="iconfont icon-tianjia1"></i
              ></el-button>
              <!--  v-if="scope.row.value1 == true ? true : false" -->
              <el-button
                class="green"
                size="mini"
                @click="handleEdit(scope.row.id)"
                ><i class="el-icon-edit"></i
              ></el-button>
              <!-- v-if="scope.row.value2 == true ? true : false" -->
              <el-button
                class="red"
                size="mini"
                @click="handleDelete(scope.row.id)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
      </el-row>
      <el-dialog
        class="add"
        title="添加菜单"
        :visible.sync="displayData"
        width="40%"
        center
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            label="上级菜单"
            prop="parent_id"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.parent_id"
              autocomplete="off"
              placeholder="顶级菜单"
              :disabled="disable"
              class="ip"
            />
            <p class="tips">必填,请输入上级菜单的id</p>
          </el-form-item>
          <el-form-item
            label="菜单名称"
            prop="title"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.title"
              autocomplete="off"
              placeholder="请输入菜单名称"
              class="ip"
            />
            <p class="tips">必填，请填写菜单名称(如：系统管理)</p>
          </el-form-item>
          <el-form-item label="是否菜单" :label-width="formLabelWidth">
            <el-switch
              v-model="form.is_menu"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
            <p class="tips">必填，请选择是否是菜单</p>
          </el-form-item>
          <el-form-item
            label="系统节点"
            prop="action"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.action"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请填写系统节点</p>
          </el-form-item>
          <el-form-item
            label="左侧显示的标题"
            prop="menu_title"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.menu_title"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请填写左侧显示的标题</p>
          </el-form-item>
          <el-form-item label="图标" prop="icon" :label-width="formLabelWidth">
            <input
              v-model="form.icon"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请上传图标</p>
          </el-form-item>
          <el-form-item
            label="是否隐藏"
            prop="is_hide"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.is_hide"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请填选择是否隐藏</p>
          </el-form-item>
          <el-form-item
            label="权限分组"
            prop="group_id"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.group_id"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请填写分组</p>
          </el-form-item>
          <el-form-item
            label="所属单位"
            prop="company_id"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.company_id"
              autocomplete="off"
              placeholder="#"
              class="ip"
            />
            <p class="tips">必填，请填写左侧显示的标题</p>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :max="99"
              label="描述文字"
            ></el-input-number>
            <p class="tips">选填，排序越高越在前面</p>
          </el-form-item>

          <el-form-item
            label="链接参数"
            prop="url"
            :label-width="formLabelWidth"
          >
            <input
              v-model="form.url"
              autocomplete="off"
              placeholder="请输入链接参数"
              class="ip"
            />
            <p class="tips">必填,生成要访问action的url</p>
          </el-form-item>
          <el-form-item label="描述" prop="desc" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="form.desc"
            >
            </el-input>

            <p class="tips">必填,对菜单的描述</p>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="savedata('form')"
            >保存数据</el-button
          >
          <el-button type="warning" @click="displayData = false"
            >取消编辑</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        class="tab"
        title="编辑"
        width="25%"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="editForm" ref="editForm">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入姓名"
              v-model="editForm.title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜单链接" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入菜单链接"
              v-model="editForm.url"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="action" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入action"
              v-model="editForm.action"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="左侧菜单名称" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入左侧菜单名称"
              v-model="editForm.menu_title"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input
              placeholder="请输入图标"
              v-model="editForm.icon"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input-number
              v-model="editForm.sort"
              :min="0"
              :max="99"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="editForm.desc"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editModify('editForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  menusList,
  ruleMenus,
  menusdel,
  menusquery,
  menus,
  menusModify,
} from "../../api/jurisdiction/index";
/* import commonInfo from "@/utils/common"; */
export default {
  /* name: "privilege-manager", */

  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      //树形展开全部
      defaultExpandAll: true,

      isLoading: true,
      /* 表格数据 */
      tableData: [],
     /*  privilege: {
        id: "",
        title: "",
        url: "",
        pid: "0",
      },
 */
      //添加菜单
      displayData: false,
      /* 添加表单 */
      form: {
        parent_id: "",
        title: "",
        sort: 1,
        action: "",
        desc: "",
        url: "",
        is_menu: "1",
        menu_title: "",
        icon: "",
        is_hide: "0",
        group_id: "0",
        company_id: "0",
      },
      /* 添加权限表单失焦判断 */
      rules: {
        /*  parent_id: [
          {
            required: true,
            message: "请输入上级的id",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur",
          },
        ],
        action: [
          {
            required: true,
            message: "请输入系统节点",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入链接参数",
            trigger: "blur",
          },
        ],
        menu_title: [
          {
            required: true,
            message: "请输入左侧显示的标题",
            trigger: "blur",
          },
        ],
        icon: [
          {
            required: true,
            message: "请输入图标",
            trigger: "blur",
          },
        ],
        is_hide: [
          {
            required: true,
            message: "请选择是否隐藏",
            trigger: "blur",
          },
        ],
        group_id: [
          {
            required: true,
            message: "请选择权限分组",
            trigger: "blur",
          },
        ],
        company_id: [
          {
            required: true,
            message: "请输入所属单位",
            trigger: "blur",
          },
        ], */
      },
      formLabelWidth: "24%",
      /* 是否禁用 */
      disable: false,
      //编辑蒙尘
      dialogFormVisible: false,
      /* 编辑表单 */
      editForm: {
        title: "",
        url: "",
        desc: "",
        sort: "",
        icon: "",
        action: "",
        menu_title: "",
      },
    };
  },
  methods: {
    // 获取菜单列表
    async loadData() {
      let res = await menusList();
      console.log(res);
      if (res.data.code == 200) {
        this.tableData = res.data.data;
      }
    },
    async loadData2() {
      let res = await menus();
      //console.log(res);
      this.current_page = res.data.current_page;
      this.total = res.data.total;
      this.isLoading = false;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.current_page = val;
      this.pagesize = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagesize = val;
    },
    //编辑
    async handleEdit(id) {
      let res = await menusquery(id);
      //console.log(res);
      this.editForm.title = res.data.data.title;
      this.editForm.url = res.data.data.url;
      this.editForm.desc = res.data.data.desc;
      this.editForm.is_menu = res.data.data.is_menu;
      this.editForm.id = res.data.data.id;
      this.editForm.sort = res.data.data.sort;
      this.editForm.icon = res.data.data.icon;
      this.editForm.action = res.data.data.action;
      this.editForm.menu_title = res.data.data.menu_title;

      this.dialogFormVisible = true;
    },
    //编辑成功
    editModify(formName) {
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await menusModify(this.editForm);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
        this.dialogFormVisible = false;
      });
    },
    //添加
    handleAdd(id) {
      if (id == -1) {
        this.displayData = true;
        (this.form.parent_id = "0"), (this.disable = false);
      } else {
        this.displayData = true;
        this.form.parent_id = id;
        this.disable = true;
      }
    },
    //保存数据
    savedata(fromName) {
      console.log(this.form);
      this.$refs[fromName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await ruleMenus(this.form);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
            this.loadData2();
            this.displayData = false;
          } else {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    //删除
    handleDelete(id) {
      this.$confirm("确认删除？")
        .then(async () => {
          let res = await menusdel(id);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
            this.loadData2();
          } else {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((_) => {});
    },

    //展开和收起
    toggleRowExpansion(isExpansion) {
      this.toggleRowExpansion_forAll(this.tableData, isExpansion);
    },
    toggleRowExpansion_forAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children != undefined && item.children != null) {
          this.toggleRowExpansion_forAll(item.children, isExpansion);
        }
      });
    },
  },

  created() {
    this.loadData();
    this.loadData2();
  },
};
</script>

<style scoped lang="less">
.commontop {
  margin-bottom: 20px;
}
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-button--mini {
  font-size: 18px !important;
}
.table {
  .el-button {
    margin-right: -10px;
  }
}
.add {
  /deep/.el-form-item {
    margin-bottom: 10px;
  }
}
//添加菜单
/deep/.el-dialog__title {
  font-size: 20px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  color: #000000;
}

/deep/.el-dialog__header {
  text-align: left;
}
/deep/.el-form-item__label {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 500;

  color: #000000;
}
/deep/.el-form-item__content {
  line-height: 20px;
}
.ip {
  border: none;
  outline: none;
  width: 95%;
  height: 35px;
  background: #f5f7ff;
  opacity: 1;
  border-radius: 0px;
  padding-left: 10px;
}
//表格按钮
.el-button--mini {
  padding: 6px 5px;
  margin: 0 13px;
}
/deep/.el-table .el-table__cell {
  padding: 8px 0;
}
</style>